import React,{useEffect} from 'react';
import {Form,DatePicker,Button,Row,Col} from 'dw-mx';
import {DatePickerAdapter} from "dw-mx-extend";
import moment from 'moment';
export default function DatePickerDemo(){
    const initialValue={
        'string':'20200820',
        'date':new Date(),
        'moment':moment()
    };
    const [form] = Form.useForm();

    const getData = ()=>{
        console.log("获取整个form的值：");
        console.log(form.getFieldsValue());
    };

    const datePickerOnChange = (value)=>{
        console.log("datePicker自身的onChange事件:");
        console.log(value);
    };

    useEffect(()=>{
        // 设置初始化值
        form.setFieldsValue(initialValue);
    },[]);

    return (
        <Form form={form}>
            <Row>
                <Col span={8}>
                    <Form.Item name={"date"} label={"date"}>
                        <DatePickerAdapter>
                            <DatePicker onChange={datePickerOnChange}/>
                        </DatePickerAdapter>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item name={"moment"} label={"moment"}>
                        <DatePickerAdapter>
                            <DatePicker onChange={datePickerOnChange}/>
                        </DatePickerAdapter>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item name={"string"} label={"string"}>
                        <DatePickerAdapter sourceMask={'YYYYMMDD'}>
                            <DatePicker onChange={datePickerOnChange}/>
                        </DatePickerAdapter>
                    </Form.Item>
                </Col>
                    <Button onClick={getData}>获取内容</Button>
            </Row>
        </Form>

    );
}